<template>
  <!-- 投保人信息 -->
  <div class="pb-[15px] px-[15px]">
    <div class="flex items-center text-[14px] pt-[15px]" v-if="edit">
      <div>投保人类型</div>
      <div class="flex">
        <div class="flex items-center ml-[25px]" @click="tabsChange(0)">
          <div class="flex items-center">
            <img
              :src="
                type == 0
                  ? getAssetsFile('insure/active.png')
                  : getAssetsFile('insure/noactive.png')
              "
              class="w-[14px] h-[14px]"
            />

            <div class="ml-[10px]">单位</div>
          </div>
        </div>
        <div class="flex items-center ml-[25px]" @click="tabsChange(1)">
          <div class="flex items-center">
            <img
              :src="
                type == 1
                  ? getAssetsFile('insure/active.png')
                  : getAssetsFile('insure/noactive.png')
              "
              class="w-[14px] h-[14px]"
            />

            <div class="ml-[10px]">个人</div>
          </div>
        </div>
      </div>
    </div>
    <div class="border-b border-[#ECECEC] py-[15px] relative">
      <van-field
        v-model="Info.name"
        :disabled="!edit"
        label-class="label"
        :name="name"
        :label="name"
        placeholder="请输入"
        @blur="inputBlur"
        :rules="[{ required: true, message: '请输入' }]"
      />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]" v-if="type == 0">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.contact"
        name="联系人姓名"
        label="联系人姓名"
        placeholder="请输入联系人姓名"
        :rules="[{ required: true, message: '请输入联系人姓名' }]"
      />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.contact_mobile"
        name="手机号码"
        label="手机号码"
        placeholder="请输入手机号码"
        :rules="[{ required: true, message: '请输入手机号码' }]"
      />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px] flex items-center w-full">
      <div class="text-[14px] min-w-[100px]">证件类型</div>
      <div class="ml-[10px] flex justify-between items-center w-full" @click="openPop(1)">
        <!-- text-[#c8c9cc] -->
        <div class="text-[14px]" :class="{ 'text-[#c8c9cc]': !edit }">
          {{ Info.card_type ? Info.card_type : "请选择证件类型" }}
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field
        label-class="label"
        :disabled="!edit"
        v-model="Info.card_no"
        name="证件号码"
        label="证件号码"
        placeholder="请输入证件号码"
        :rules="[{ required: true, message: '请输入证件号码' }]"
      />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.mailbox"
        name="邮箱"
        label="邮箱"
        placeholder="请输入邮箱"
        :rules="[{ required: true, message: '请输入邮箱' }]"
      />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]" v-if="false">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.address"
        name="投保区域地址"
        label="投保区域地址"
        placeholder="请输入投保区域地址"
        :rules="[{ required: true, message: '投保区域地址' }]"
      />
    </div>
    <!-- <div class="border-b border-[#ECECEC] py-[15px] flex items-center">
      <div class="text-[14px] min-w-[100px]">施工地址</div>
      <div
        class="ml-[10px] flex justify-between items-center w-full"
        @click="openPop(2)"
      >
 
        <div class="text-[14px]">
          {{ addressValue ? addressValue : "请选择施工地址" }}
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div> -->
    <!-- <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="addInfo.address"
        name="详细地址"
        label="详细地址"
        placeholder="请输入详细地址"
        :rules="[{ required: true, message: '请输入详细地址' }]"
      />
    </div> -->
  </div>
  <div>
    <van-popup v-model:show="show" position="bottom" :style="{ height: '40%' }">
      <van-picker
        title="证件类型"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="show = false"
        :columns-field-names="{ text: 'label' }"
      />
    </van-popup>
  </div>
  <!-- <div>
    <van-popup
      v-model:show="isPopup"
      position="bottom"
      round
      :style="{ height: '40%' }"
    >
      <van-area
        title="选择地址"
        :area-list="areaList"
        value=""
        :columns-placeholder="['请选择', '请选择', '请选择']"
        @confirm="confirmBtn"
      />
    </van-popup>
  </div> -->
</template>
<script setup lang="ts">
import { reactive, ref, defineProps, watchEffect } from "vue";
import getAssetsFile from "@/utils/getImageurl";
// import { areaList } from "@vant/area-data";
import { useRoute } from "vue-router";
import { getBusinessInfo } from "@/utils/api";
const props = defineProps({
  infoTbrxx: { type: Object },
  Info: { type: Object }, //回显数据
  edit: { type: Boolean },
  addInfo: { type: Object },
});
const type = ref(0);
const route = useRoute();
const Info = reactive<infoTbrxxType>({
  name: "",
  card_type: "",
  card_no: "",
  contact: "",
  contact_mobile: "",
  mailbox: "",
  insure_type: "单位",
  address: "",
});
const addInfo = reactive<addInfoType>({
  province: "",
  city: "",
  area: "",
  address: "",
  province_code: "",
  city_code: "",
  area_code: "",
});
// const nameShow = ref(false);
// const nameList = ref<any>([]);
const name = ref("单位名称");
const cardType = ref([] as any); //单位类型数组
const cardTypeTwo = ref([] as any); //个人类型数据
const isPopup = ref(false);
// const addressValue = ref("");
const show = ref(false);
let columns = [] as any;
const onConfirm = (selectedValues: any) => {
  console.log(selectedValues.selectedValues[0]);
  Info.card_type = selectedValues.selectedValues[0];
  show.value = false;
  // name.value = selectedValues.selectedOptions[0].text;
  // show.value = false;
};

watchEffect(() => {
  if (props.Info) {
    if (route.query.order_id) {
      cardTypeTwo.value = props?.Info?.bx_info?.cardTypeTwo;
      cardType.value = props?.Info?.bx_info?.cardType;

      if (props?.Info?.insure?.insure_type == "个人") {
        //回显

        cardTypeTwo.value.forEach((item: any) => {
          let param = {
            label: item,
            value: item,
          };
          columns.push(param);
        });
        name.value = "姓名";
        Info.insure_type = "个人";
        type.value = 1;
      } else if (props?.Info?.insure?.insure_type == "单位") {
        //回显

        cardType.value.forEach((item: any) => {
          let param = {
            label: item,
            value: item,
          };
          columns.push(param);
        });
        Info.insure_type = "单位";
        name.value = "单位名称";
        type.value = 0;
      }
    } else {
      //没有订单iD
      cardType.value = props.Info.cardType;
      cardTypeTwo.value = props.Info.cardTypeTwo;

      if (JSON.parse(sessionStorage.getItem("dd_gz") as string)) {
        if (
          JSON.parse(sessionStorage.getItem("dd_gz") as string)?.insure?.insure_type ==
          "个人"
        ) {
          Info.insure_type = "个人";
          name.value = "姓名";
          type.value = 1;

          if (cardTypeTwo.value !== undefined) {
            cardTypeTwo.value.forEach((item: any) => {
              let param = {
                label: item,
                value: item,
              };
              columns.push(param);
            });
            Info.card_type = columns[0].label;
          }
        } else {
          Info.insure_type = "单位";
          name.value = "单位名称";
          type.value = 0;

          if (cardType.value !== undefined) {
            cardType.value.forEach((item: any) => {
              let param = {
                label: item,
                value: item,
              };
              columns.push(param);
            });
            Info.card_type = columns[0].label;
          }
        }
      } else {
        //没有缓存
        type.value = 0;

        if (cardType.value !== undefined) {
          cardType.value.forEach((item: any) => {
            let param = {
              label: item,
              value: item,
            };
            columns.push(param);
          });

          Info.card_type = columns[0].label;
        }
      }
    }
  }
  if (props.infoTbrxx) {
    if (props.infoTbrxx.name == "") return;
    let key: keyof infoTbrxxType;
    for (key in Info) {
      Info[key] = props.infoTbrxx[key];
    }
  }
});
const inputBlur = async () => {
  if (type.value == 0) {
    const res = await getBusinessInfo({ name: Info.name });
    if (res.code == 1) {
      let i: keyof infoTbrxxType;
      for (i in Info) {
        if (res.msg[i]) {
          Info[i] = res.msg[i];
        }
      }
    }
  }
};
// const inputChange = async (v: any) => {
//   if (type.value == 0) {
//     const res = await getBusiness({ name: v });
//     nameList.value = res.msg;
//     nameShow.value = true;
//   } else {
//     //个人
//     Info.contact = v;
//   }
// };
// const clickName = (item: any) => {
//   Info.name = item.companyName;
//   Info.card_no = item.creditNo;
//   nameShow.value = false;
// };
const tabsChange = (index: number) => {
  type.value = index;
  // columns.value = [];
  if (index == 0) {
    // typeChange(index);
    //单位
    Info.insure_type = "单位";
    name.value = "单位名称";
    columns = [];

    cardType.value.forEach((item: any) => {
      let param = {
        label: item,
        value: item,
      };

      columns.push(param);
    });
  } else {
    // typeChange(index);
    //个人

    Info.insure_type = "个人";
    name.value = "姓名";
    columns = [];
    cardTypeTwo.value.forEach((item: any) => {
      let param = {
        label: item,
        value: item,
      };

      columns.push(param);
    });
  }
  Info.card_type = columns[0].label;
  Info.name = "";
  Info.card_no = "";
};
//证件类型的判断
// const typeChange = (index: number) => {
//   columns.value = [];
//   if (route.query.order_id) {
//     //详情

//     if (index == 0) {
//       //单位
//       cardType.value.forEach((item: any) => {
//         let param = {
//           label: item,
//           value: item,
//         };

//         columns.value.push(param);
//       });
//     } else {
//       //个人
//       cardTypeTwo.value.forEach((item: any) => {
//         let param = {
//           label: item,
//           value: item,
//         };

//         columns.value.push(param);
//       });
//     }
//   } else {
//     if (index == 0) {
//       //单位
//       cardType.value.forEach((item: any) => {
//         let param = {
//           label: item,
//           value: item,
//         };

//         columns.value.push(param);
//       });
//     } else {
//       //个人
//       cardTypeTwo.value.forEach((item: any) => {
//         let param = {
//           label: item,
//           value: item,
//         };

//         columns.value.push(param);
//       });
//     }
//   }
// };
//选择地址
// const confirmBtn = (res: any) => {
//   addressValue.value =
//     res.selectedOptions[0].text +
//     "-" +
//     res.selectedOptions[1].text +
//     "-" +
//     res.selectedOptions[2].text;
//   addInfo.province = res.selectedOptions[0].text;
//   addInfo.city = res.selectedOptions[1].text;
//   addInfo.area = res.selectedOptions[2].text;
//   addInfo.province_code = res.selectedOptions[0].value;
//   addInfo.city_code = res.selectedOptions[1].value;
//   addInfo.area_code = res.selectedOptions[2].value;

//   isPopup.value = false;
// };
//打卡弹窗
const openPop = (index: number) => {
  //1是证件类型 2是项目所在地
  if (!props.edit) return;
  if (index == 1) {
    show.value = true;
  } else {
    isPopup.value = true;
  }
};
defineExpose({
  Info,
  addInfo,
});
// const username = props.Info?.username;
</script>
<style scoped lang="scss">
:deep(.van-cell) {
  padding: 0 !important;
  font-size: 14px !important;
}

:deep(input.van-field__control::-webkit-input-placeholder) {
  color: #c8c9cc;
}

:deep(.label) {
  color: black !important;
}
</style>
